<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4042237_hxpfhzx0l36.css">
    <link rel="stylesheet" href="/static/css/pagination.min.css">
    <link rel="stylesheet" href="/static/css/table.css">
    <link rel="stylesheet" href="/static/css/form.css">
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        body{
            display: flex;
            flex-direction: column;
            font-size: 14px;
        }
        .top{
            height: 60px;
            background-color: #545C64;
            flex-shrink: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0px 15px;
        }
        .bottom{
            flex: 1;
            display: flex;
        }
        .left{
            background-color: #545C64;
            width: 200px;
            height: 100%;
            color: white;
            user-select: none;
        }
        .right{
            flex: 1;
        }
        .menu-parent{
            padding-left: 40px;
            justify-content: space-between;
        }
        .menu-child{
            padding-left: 60px;
        }
        .menu-parent,.menu-child{
            height: 45px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .menu-parent:hover,.menu-child:hover{
            background-color: #434A50;
        }
        .menu-logo{
            margin-right: 20px;
        }
        .menu-child{
            display: none;
        }
        .menu-active{
            color: rgb(255, 208, 75);
        }
        .head-item{
            color: #cfcfcf;
        }
        .head-item img{
            height: 50px;
            border-radius: 50px;
            margin-right: 10px;
        }
        .head-item {
            display: flex;
            height: 100%;
        }
        .head-item>div {
            padding: 0px 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .head-item>div:hover{
            background-color: #434A50;
            color: white;
        }
        .logo-item{
            color: white;
        }
        .iconfont{
            margin-right: 10px;
        }
        .menu-parent>span{
            display: flex;
            align-items: center;
        }
        .right {
            display: flex;
            flex-direction: column;
            background-color: #e9e9e9;
        }
        .right-title {
            height: 40px;
            display: flex;
            align-items: center;
            padding: 0px 10px;
            background-color: white;
        }
        .right-body {
            margin: 10px;
            background-color: white;
            padding: 10px;
            flex: 1;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="logo-item">
        爱购网后台管理系统
    </div>
    <div class="head-item">
        <div>
            <c:if test="${SessionAdmin.img == null || SessionAdmin.img == ''}">
                <span><img src="/static/image/admin/login-title.jpg"></span>
            </c:if>
            <c:if test="${SessionAdmin.img != null && SessionAdmin.img != ''}">
                <span><img src="/file/show?name=${SessionAdmin.img}"></span>
            </c:if>
            <span>${SessionAdmin.name}</span>
        </div>
        <div>
            退出
        </div>
    </div>
</div>
<div class="bottom">
    <div class="left">
        <div class="menu-item">
            <div class="menu-parent">
                <span><i class="iconfont icon-icon-test1"></i>系统管理</span>
                <img class="menu-logo" src="/static/image/arrow-down-bold.png">
            </div>
            <div class="menu-child" url="/admin/page">管理员维护</div>
        </div>
        <div class="menu-item">
            <div class="menu-parent">
                <span><i class="iconfont icon-icon-test3"></i>轮播图</span>
                <img class="menu-logo" src="/static/image/arrow-down-bold.png">
            </div>
            <div class="menu-child" url="/carousel/page">轮播图维护</div>
        </div>
        <div class="menu-item">
            <div class="menu-parent">
                <span><i class="iconfont icon-icon-test"></i>商品分类</span>
                <img class="menu-logo" src="/static/image/arrow-down-bold.png">
            </div>
            <div class="menu-child" url="/productType/page">商品分类服务</div>
        </div>
        <div class="menu-item">
            <div class="menu-parent">
                <span><i class="iconfont icon-icon-test"></i>商品品牌</span>
                <img class="menu-logo" src="/static/image/arrow-down-bold.png">
            </div>
            <div class="menu-child" url="/brand/page">商品品牌维护</div>
        </div>
        <div class="menu-item">
            <div class="menu-parent">
                <span><i class="iconfont icon-icon-test"></i>商品管理</span>
                <img class="menu-logo" src="/static/image/arrow-down-bold.png">
            </div>
            <div class="menu-child" url="/admin/product/page">用户管理</div>
        </div>
    </div>
    <div class="right">
        <div class="right-title">
            当前位置：<span class="point">管理员维护</span>
        </div>
        <div class="right-body"></div>
    </div>
    <script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
    <script src="/static/js/pagination/pagination.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script>
        $(function () {
            $(".menu-parent").click(function () {
                if($(this).nextAll().is(":hidden")){
                    $(this).nextAll().css("display", "flex");   //显示
                    $(this).find("img").attr("src", "/static/image/arrow-up-bold.png");
                }else{
                    $(this).nextAll().hide();   //隐藏
                    $(this).find("img").attr("src", "/static/image/arrow-down-bold.png");
                }
            })

            //菜单点击事件
            $(".menu-child").click(function () {
                $(".menu-child").removeClass("menu-active");
                $(this).addClass("menu-active");

                let url = $(this).attr("url");
                $(".right-body").load(url);
                $(".point").text($(this).text());
            })

            $(".menu-child:eq(0)").click();
        })
    </script>
</div>
</body>
</html>